<template>
	<view class="my-team" :style="{paddingTop:menuRect.top+'px'}">
		<!-- #ifndef H5 -->
		<view class="nav-custom flex-center" :style="{height:menuRect.height+'px'}">
			<view class="nav-back icon32 image-arrow-black" @click="navigateBack"></view>
			<view class="ft36">我的团队</view>
		</view>
		<!-- #endif -->

		<view class="flex-between top">
			<view class="flex-start">
				<view class="avatar-cta icon128 ">
					<image class="icon128 avatar" :src="teamLeaderInfo.headimg" mode="aspectFit"></image>
					<!-- <view class="ft22-white captain-label">团队长</view> -->
				</view>
				<view class="margin-l24">
					<view class="flex-start">
						<view class="ft32-bold margin-r8 user-name">{{teamLeaderInfo.nickname}}</view>
						<view class="ft22-white level-label">{{teamLeaderInfo.level_name}}</view>
					</view>
					<view class="ft26-gray margin-t8">{{teamLeaderInfo.mobile}}</view>
				</view>
			</view>

			<!-- <view class="flex-start team-name-cta">
				<view class="ft32-bold team-name">{{teamLeaderInfo.team_name || '暂无团名'}}</view>
				<view class="icon32 image-pencil" @click="showEditTeanName" v-if="teamLeaderInfo.is_change == 1">
				</view>
			</view> -->
		</view>
		<view class="margin-t68">
			<ns-empty v-if="list.length == 0" :fixed="false" text="暂无数据" :isIndex="false"></ns-empty>
			<view class="list-item box flex-between" :class="[item.deth == 0?'margin-t20':'children']"
				v-for="(item,index) in list" :key="index"
				:style="{backgroundColor:item.deth == 0?`#fff`:`rgba(63, 116, 250, ${item.deth/100})`}">
				<view class="ft20-white franchisee-label">{{item.level_name}}</view>
				<view class="flex-start">
					<image class="icon88 avatar" :src="item.headimg" mode="aspectFit"></image>
					<view class="margin-l24">
						<view class="flex-start">
							<view class="nickname ft28-bold">{{item.nickname}}</view>
							<view class="ft24-666 margin-l8">{{item.mobile}}</view>
							<image class="icon32 margin-l8" :src="$util.img(`upload/uniapp/xxjk/icon_copy_gray@2x.png`)"
								mode="aspectFit" @click="$util.copy(item.mobile)"></image>
						</view>
						<view class="ft24-666 margin-t16">加入日期 {{item.create_time}}</view>
						<view class="ft24-purple margin-t16 ">团队业绩 {{item.team_all}}</view>
					</view>

				</view>
				<view class="list-item-addon">
					<view class="ft36 flex-center">{{item.team_num}}</view>
					<view v-if="item.expand == 0" class="ft24-purple text-underline nowrap"
						@click="expand(index,item.fenxiao_id,item.deth,item.relation+item.fenxiao_id+'-')">查看Ta的队员
					</view>
					<view v-else class="ft24-purple text-underline nowrap"
						@click="packup(index,item.relation+item.fenxiao_id+'-')">收起
					</view>
				</view>
			</view>
		</view>
		<view class="pop-mask" v-if="modalVisible">
			<view class="modal">
				<view class="modal-title ft36">修改名称</view>
				<input class="modal-input ft32" type="text" v-model="team_name" />
				<view class="modal-footer flex-between">
					<view class="modal-cancel flex-center" @click="closeModalVisible()">取消</view>
					<view class="modal-confirm flex-center" @click="editTeamName">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				modalVisible: false,
				menuRect: {
					top: 0,
					height: 0
				},
				listParams: {
					page: 1,
					last_page: 1,
					page_size: 10
				},
				teamLeaderInfo: {},
				team_name: '',
				teamMember: {

				},
				isAble: true
			}
		},
		methods: {
			showEditTeanName() {
				this.modalVisible = true;
				this.team_name = this.teamLeaderInfo.team_names;
			},
			closeModalVisible() {
				this.modalVisible = false;
			},
			navigateBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			editTeamName() {
				this.$api.sendRequest({
					url: '/fenxiao/api/fenxiao/editTeamName',
					data: {
						team_name: this.team_name
					},
					success: (res) => {
						if (res.code == 0) {
							this.$util.showToast({
								title: res.message
							});
							this.closeModalVisible();
						}
					}
				})
			},
			getList() {
				const {
					page,
					page_size
				} = this.listParams;
				return new Promise((resolve, reject) => {
					this.$api.sendRequest({
						url: '/fenxiao/api/fenxiao/myTeam',
						data: {
							page,
							limit: page_size
						},
						success: (res) => {
							if (res.code == 0) {
								let {
									team_leader_info,
									team_data
								} = res.data;
								this.teamLeaderInfo = team_leader_info;
								this.list = team_data.map(item => {
									return {
										...item,
										relation: '',
										deth: 0,
										expand: 0
									}
								})
								resolve(res);
							} else {
								reject(res);
							}
						}
					})
				})
			},
			expand(index, id, deth, relation) { //展开查看团队
				if (this.isAble) {
					this.isAble = false
					this.list[index].expand = 1;
					this.$api.sendRequest({
						url: '/fenxiao/api/fenxiao/checkTeam',
						data: {
							fenxiao_id: id
						},
						success: (res) => {
							if (res.code == 0) {
								res.data.map(item => {
									this.list.splice(index + 1, 0, {
										...item,
										relation: relation + '-',
										deth: deth - (-10),
										expand: 0,
									});
								})
								this.isAble = true
							}
						}
					})
				}
			},
			packup(index, relation) {
				if (this.isAble) {
					this.isAble = false
					this.list[index].expand = 0;
					this.list = this.list.filter(v => {
						return !(v.relation.indexOf(relation) != -1);
					});
					this.isAble = true
				}
			}
		},
		onReachBottom() {
			// this.nextPage();
		},
		onLoad() {
			// #ifdef MP
			this.menuRect = uni.getMenuButtonBoundingClientRect();
			// #endif
			// #ifndef MP
			const sys = uni.getSystemInfoSync();
			if (sys.statusBarHeight) {
				this.menuRect.top = sys.statusBarHeight;
				this.menuRect.height = sys.platform == 'ios' ? 44 : 48;
			}
			// #endif
			if (uni.getStorageSync('token')) {
				this.getList();
			} else {
				this.$util.redirectTo('/otherpages/login/login/login', {
					back: '/otherpages/fenxiao/team/team'
				});
			}
			uni.setNavigationBarTitle({
				title: '我的团队'
			});
		}
	}
</script>

<style lang="scss" scope>
	@import '../public/css/common.scss';

	.margin-t20 {
		margin-top: 20rpx;
	}

	.ft36-c000 {
		@include ft(36rpx, 50rpx, #000, bold);
	}

	.nav-custom {
		position: relative;

		.nav-back {
			position: absolute;
			left: 32rpx;
		}
	}

	.avatar {
		border-radius: 50%;
		background-color: #fafafa;
	}

	.my-team {

		background: linear-gradient(180deg, rgba(63, 116, 250, .3) 0%, rgba(167, 151, 223, 0) 100%);
		background-size: 100% 643rpx;
		background-repeat: no-repeat;
		min-height: 100vh;

		.top {
			padding: 30rpx;
			position: relative;

			.user-name {
				white-space: nowrap;
			}

			.level-label {
				@include flex;
				padding: 0 14rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.2);
				border-radius: 18rpx;
			}

			.team-name-cta {
				position: absolute;
				right: 30rpx;
				height: 64rpx;
				padding: 10rpx 20rpx;
				border-radius: 32rpx;
				border: 1rpx solid #000;
				// transform: scale(.5) translateX(50%);

				.team-name {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					line-height: 45rpx;
				}
			}

		}

		.avatar-cta {
			position: relative;
			overflow: hidden;

			.captain-label {
				@include flex;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 128rpx;
				height: 44rpx;
				background: rgba(0, 0, 0, 0.4);
			}
		}


		.list-item {
			width: 690rpx;
			margin-left: 30rpx;
			position: relative;
			padding-top: 48rpx;
			padding-bottom: 48rpx;
			border-radius: 16rpx 16rpx 0 0;

			&.children {
				border-top: 1rpx solid #fff;
			}

			.nickname {
				width: 140rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.franchisee-label {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 15rpx;
				min-width: 88rpx;
				height: 36rpx;
				background: rgba(0, 0, 0, 0.2);
				border-radius: 16rpx 0 16rpx 0;
				@include flex;
			}

			.list-item-addon {
				@include flex(column, center, center);
				width: 150rpx;
			}
		}
	}

	.pop-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(#000, 0.3);
		@include flex;

		.modal {
			width: 600rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.modal-title {
				padding: 48rpx 0;
				@include flex;
				color: #010101;
			}

			.modal-input {
				margin-left: 25rpx;
				width: 550rpx;
				height: 88rpx;
				background: rgba(0, 0, 0, 0.05);
				border-radius: 44rpx;
				text-align: center;
				color: #000000;
			}

			.modal-footer {
				margin-top: 56rpx;
				padding: 30rpx 0;
				border-top: 1rpx solid #D8D8D8;

				.modal-cancel,
				.modal-confirm {
					width: 100%;
					@include ft(36rpx, 50rpx, #909399);
				}

				.modal-confirm {
					color: $theme_purple;
					border-left: 1rpx solid #D8D8D8;
				}
			}

		}

	}
</style>